<script setup>
import { ref, reactive, provide, watch } from 'vue'
import { useRouter, RouterView, useRoute } from 'vue-router'

const route = useRoute()
const router = useRouter()

//控制父页面、子页面的显示
const visiblity = ref(true)

//检测路由是否发生变化，入变化，刷新父页面
const notFistChange = ref(false)
watch(
  route,
  () => {
    console.log("采购订单路由检测到路由发生改变！")
    console.log("此时visiblity的值为:")
    console.log(visiblity.value)
    //如果是由父页跳转到子页面，不执行，否则执行
    if (!visiblity.value && notFistChange.value) {
      visiblity.value = true
      console.log("visiblity.value:")
      console.log(visiblity.value)
      notFistChange.value = false
    } else {
      notFistChange.value = true
    }
  }
)

//跳转采购订单物料入库组件
function toPOrderMaterial() {
  visiblity.value = false
  console.log("采购订单组件已屏蔽")
  console.log("此时visiblity的值为:")
  console.log(visiblity.value)
  router.push({ name: "采购订单物料入库" })
}

//为后代组件提供当前组件的表单数据
const currentBin = "[SFA840973] [2019-4-15 12:12:15]"
provide("currentBin", currentBin)

//测试数据
const data=[{
  "index":"E47638432",
  "name":"六方铜螺钉",
  "number1":"50",
  "number2":"0",
  "time":"2019-03-21 11:23:15"
}]
let a="SFA840973"
let b="2019-4-15 12:12:15"

</script>
<template>
  <el-row style="background-color: white;margin: 40px 10px 0px;border:mintcream;" v-if="visiblity">
    <el-col :span="24">
      <el-row class="row2" style="margin: 0px 24px 0px;">

        <el-col :span="24" class="col2">
          <el-row>
            <el-col :span="5">
              <el-date-picker v-model="indate1" type="date" placeholder="采购日期开始" />
              <!-- <el-input  style="margin:0px 0px 0px 0px;" v-model="input1" class="input" placeholder="采购开始日期" clearable>
              </el-input> -->
            </el-col>
            <el-col :span="2">
              <el-button :icon="Calendar" size="middle">

              </el-button>
            </el-col>
            <el-col :span="5">
              <el-input v-model="input2" class="input" placeholder="采购结束日期" clearable />
            </el-col>
            <el-col :span="3">
              <el-button :icon="Calendar" size="middle" style="margin:0px 0px 0px 0px;">

              </el-button>
            </el-col>
            <el-col :span="5" style="margin-top:10px">
      
    </el-col>
    <el-col :span="5" style="margin-top:10px">
      <el-date-picker
        v-model="indate2"
        type="date"
        placeholder="入库日期结束"
      />
    </el-col>

            <el-col :span="5">
              <el-input v-model="input" class="input" placeholder="请输入采购订单编号" clearable>

              </el-input>
            </el-col>
            <el-col :span="3">
              <el-button :icon="RefreshRight" size="middle" style="margin:0px 0px 0px 0px; ">
                查询
              </el-button>
            </el-col>
          </el-row>
        </el-col>


      </el-row>
      <!-- 表单主体 -->
      <el-row class="row3" style="width: 96%;margin: 0px auto;">
        <el-col :span="24">
          <!-- data、click需要更改 -->
          <el-row class="purchase_head">
            <!-- a,b需要后端数据 -->
            <el-col :span="18" align="middle">
              订单编号：{{ a }}【采购单生成日期：{{ b }}】
            </el-col>
            <el-col :span="4">
              <!-- 连接物料入库界面 -->
              <el-button style="background-color:rgb(100, 100, 245) ;color: aliceblue; " @click="toPOrderMaterial">
                原材料入库-点我
              </el-button>

            </el-col>
          </el-row>
          <!-- prop需要更改 -->
          <el-table :data="data" stripe border style="width:100%">
            <el-table-column label="物料编号" align="center" prop="index" :index="indexMethod" width="180px" />
            <el-table-column label="物料名称" align="center" prop="name" width="180px" />
            <el-table-column label="计划采购数量" align="center" prop="number1" width="180px" />
            <el-table-column label="已采购数量" align="center" prop="number2" width="180px" />
            <el-table-column label="最近一次采购时间" align="center" prop="time"></el-table-column>
          </el-table>

        </el-col>
      </el-row>
    </el-col>
  </el-row>
  <!-- 子页面显示 -->
  <el-row v-if="!visiblity">
    <el-col :span="24">
      <RouterView />
    </el-col>
  </el-row>
</template>
<style scoped>
.row2 {
  padding-top: 40px;
}

.row2 .col2 .input {
  border-radius: 0px;
}

.purchase_head {
  background-color: rgb(100, 100, 245);
  color: aliceblue;
  height: 40px;

}

.purchase_head .el-col {
  padding-top: 5px;
  height: 40px;
}
</style>